Shopify Theme Expert required
- or -
Post a project like this1259
£200(approx. $248)
- Posted:
- Proposals: 6
- Remote
- #3030892
- OPPORTUNITY
- PRE-FUNDED
- Awarded
Graphic Designer |Experienced Web Designer | Video/Audio Editor | PowerPoint/Keynote | Content Writer |
San Jose
Facebook Ads I E-commerce |Tutorials I Graphics Design I Social Media Marketing and Management
Cagayan de Oro
24220312606773284430343141644687674999583
Description
Experience Level: Expert
I'm interested in a few tweaks to my shopify store.
1) implementing tabs on the description page of my shopify store mayfairsilk.com.
Do you have examples of sites you've done this for? how is it achieved? through an app or hard-coded? How is the data separated between tabs using the wysiwig of shopify products description? div class or something in view source mode of the description editor?
I'm using shogun for some pages, but it doesn't seem scalable to use shogun to create every single product page for the tabs. What is another solution that shopify stores can use that is flexible and easy to manage going forward.
2) I want to be able to link our pillowcase products together, so on the product page of pillowcases, you can select the different colours with icons. I have create swatch icons for each product colour. (we have implemented the different colours of pillowcases and other products as separate products rather than variants. we use variant for size and border detail options etc. We do include 'Colour' variant so it's better for google feeds, but each product only contains one option in that variant which is the colour for that product.
Similar to how this website does with 'select colour': https://www.slipsilkpillowcase.co.uk/collections/pillowcases/products/pillowcase-white-king
You'll see that when you click a different colour, it's not a variant of the same product, it's a new product that is selected and the page reloads.
or how this one does it https://www.wolfandbadger.com/uk/teal-breeze-finest-silk-pillowcase-25-momme-classic-envelope-standard/?result_index=6&query_id=fc9ff6672c697f8f5f72060d897188ec
The icons on that one aren't very good, but this is a retailer that is stocking our product and the products are loaded individually and then linked so they can be referenced on the product page.
We need to create a colour reference table eg.
Color variant:
'Midnight Blue' uses img='bluswatch.png'
'Teal Breeze' uses img='teaswatch.png'
'Brilliant White' uses img='whswatch.png'
'Ivory' uses img='ivswatch.png'
'Pastel Blue' uses img="pblswatch.png'
'Precious Pink' uses img='pnkswatch.png'
'Charcoal' uses img='charswatch.png'
'Iridescent Garden' uses img="igardswatch.png'
'Hummingbird' uses img='humswatch.png'
'Leopard' uses img='leopswatch.png'
'Twilight Blue' uses img="tbluswatch.png'
Then for the following product types, the product-template should be updated to show these swatch icons for each variant colour available in that collection. If a swatch doesn't exist it should have a fall back swatch that I'll make, just so it doesnt break in case we add a new colour to the product list before adding a swatch.
Product Types:
Silk Pillowcase
Silk Bed Linen
Silk Face Mask
Sleep Mask
Silk Hair Ties - Variant Size: Slim
Silk Hair Ties - Variant Size: Standard
I'll attach how I want the colour selection icons to look on the page. And the individual swatch icons for each colour as a transparent background PNG link to the product page of each product within than product type.
So each of the above product types, whatever collection they are part of, when their product page is viewed, it checks all products of the same product type and provides an icon that will hyperlink to their product page and displays the colour swatch icon that represents the colour variant that product has.
Simple example. On this page: https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-ivory-25-momme-finest-100-pure-mulberry-silk-envelope-style
above the Size and Border Detail boxes, it would have a colour selection box, similar to the screenshot i provided.
And there would be an ivory coloured icon (current selected product), pink coloured icon and a black coloured icon.
these would link to the following products
Pink = https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-precious-pink-25-momme-finest-100-pure-mulberry-silk-envelope-style
Black = https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-charcoal-25-momme-finest-100-pure-mulberry-silk-envelope-style
and so on with all the other colours that are in that product type.
Tool tip also comes up when you hover over one of the coloured icons. From left to right:
Brilliant White, Ivory, Teal Breeze, Precious Pink, Pastel Blue, Midnight Blue, Charcoal, Leopard, Hummingbird.
Color Swatches:
- Show only on Product Types:
- Silk Pillowcase
- Silk Duvet Covers
- Silk Fitted Sheets
- Slik Flat Sheets
- Silk Bed Linen Sets
- Silk Face Mask
- Sleep Mask
- Silk Hair Ties - Variant Size: Slim
- Silk Hair Ties - Variant Size: Standard
Tooltip on Color swatch: showing the title of the colour.
1) implementing tabs on the description page of my shopify store mayfairsilk.com.
Do you have examples of sites you've done this for? how is it achieved? through an app or hard-coded? How is the data separated between tabs using the wysiwig of shopify products description? div class or something in view source mode of the description editor?
I'm using shogun for some pages, but it doesn't seem scalable to use shogun to create every single product page for the tabs. What is another solution that shopify stores can use that is flexible and easy to manage going forward.
2) I want to be able to link our pillowcase products together, so on the product page of pillowcases, you can select the different colours with icons. I have create swatch icons for each product colour. (we have implemented the different colours of pillowcases and other products as separate products rather than variants. we use variant for size and border detail options etc. We do include 'Colour' variant so it's better for google feeds, but each product only contains one option in that variant which is the colour for that product.
Similar to how this website does with 'select colour': https://www.slipsilkpillowcase.co.uk/collections/pillowcases/products/pillowcase-white-king
You'll see that when you click a different colour, it's not a variant of the same product, it's a new product that is selected and the page reloads.
or how this one does it https://www.wolfandbadger.com/uk/teal-breeze-finest-silk-pillowcase-25-momme-classic-envelope-standard/?result_index=6&query_id=fc9ff6672c697f8f5f72060d897188ec
The icons on that one aren't very good, but this is a retailer that is stocking our product and the products are loaded individually and then linked so they can be referenced on the product page.
We need to create a colour reference table eg.
Color variant:
'Midnight Blue' uses img='bluswatch.png'
'Teal Breeze' uses img='teaswatch.png'
'Brilliant White' uses img='whswatch.png'
'Ivory' uses img='ivswatch.png'
'Pastel Blue' uses img="pblswatch.png'
'Precious Pink' uses img='pnkswatch.png'
'Charcoal' uses img='charswatch.png'
'Iridescent Garden' uses img="igardswatch.png'
'Hummingbird' uses img='humswatch.png'
'Leopard' uses img='leopswatch.png'
'Twilight Blue' uses img="tbluswatch.png'
Then for the following product types, the product-template should be updated to show these swatch icons for each variant colour available in that collection. If a swatch doesn't exist it should have a fall back swatch that I'll make, just so it doesnt break in case we add a new colour to the product list before adding a swatch.
Product Types:
Silk Pillowcase
Silk Bed Linen
Silk Face Mask
Sleep Mask
Silk Hair Ties - Variant Size: Slim
Silk Hair Ties - Variant Size: Standard
I'll attach how I want the colour selection icons to look on the page. And the individual swatch icons for each colour as a transparent background PNG link to the product page of each product within than product type.
So each of the above product types, whatever collection they are part of, when their product page is viewed, it checks all products of the same product type and provides an icon that will hyperlink to their product page and displays the colour swatch icon that represents the colour variant that product has.
Simple example. On this page: https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-ivory-25-momme-finest-100-pure-mulberry-silk-envelope-style
above the Size and Border Detail boxes, it would have a colour selection box, similar to the screenshot i provided.
And there would be an ivory coloured icon (current selected product), pink coloured icon and a black coloured icon.
these would link to the following products
Pink = https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-precious-pink-25-momme-finest-100-pure-mulberry-silk-envelope-style
Black = https://mayfairsilk.com/collections/pure-mulberry-silk-pillowcases/products/mayfairsilk-pillowcase-charcoal-25-momme-finest-100-pure-mulberry-silk-envelope-style
and so on with all the other colours that are in that product type.
Tool tip also comes up when you hover over one of the coloured icons. From left to right:
Brilliant White, Ivory, Teal Breeze, Precious Pink, Pastel Blue, Midnight Blue, Charcoal, Leopard, Hummingbird.
Color Swatches:
- Show only on Product Types:
- Silk Pillowcase
- Silk Duvet Covers
- Silk Fitted Sheets
- Slik Flat Sheets
- Silk Bed Linen Sets
- Silk Face Mask
- Sleep Mask
- Silk Hair Ties - Variant Size: Slim
- Silk Hair Ties - Variant Size: Standard
Tooltip on Color swatch: showing the title of the colour.
MayfairSilk
99% (28)Projects Completed
13
Freelancers worked with
11
Projects awarded
37%
Last project
18 Jul 2021
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Is the budget feasible?
950936
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies