Product Page

How to access the theme settings?

  • First, you login to your Shopify admin > Go to Online Store, look at the current theme at the center of the page, and click on the Customize button

  • Click on the search bar placed at the center top of the page, and choose Product section > select Default Product

  • There are 3 main sections on the product page, click on the one you wish to setup

I. Product Page section

1. General Settings

- Product Review App: you can choose to display/ hide the review section for the product by selecting an option (None/ Product Review)

- Mark the tickbox to display the Wishlist feature (placed next to the "Add to cart" button)

There are 3 ways to access the ACF to open the product editor 

1st - You open the ACF app right at the Apps section from Shopify admin and go to the product section. Then scroll down to open the main product which you want to link to other product colors. 

2nd - You go to the product editor at the Products section from the admin menu to choose the determined product. Then, click on the More actions button > choose Edit Metafields and you'll be moved straight to its settings.

3st - Access ACF by 

Arena Shopify admin extension

it helps you open the product editor right at the product page on the storefront. After you add the Arena admin extension, at the product page which you want to edit the metafields on the storefront, click on its Shortcut at the right-hand side to open the menu. Then, choose Edit Custom Field to go straight to its settings.

You can choose one of those 3 ways to access the ACF app, once you are at its metafield settings, let's go to the next steps to link other product colors: 

- Scroll down to see the Other Product Color fields and click on the downward arrow.

- Enter the name you want to display into the Product Title. Then, click on the Product Selection to choose the product color you want to link together.

- Click on the Repeated field icon on the last field to add another new one just in case you want to add more colors.

Finally, just reload the product page and see the result.

- Variant Image

Just enter the exact name of the product option name you want to display on this product page. Separate each by a comma. (Eg: PAGE TYPE,GIVE BACK,SIZE)

In case you don't know the option names, you need to access the product editor in the Products section from the Shopify admin to get them (illustrated below)

Color Hex Code

This is an alternative for the color section you want to show on this product if it doesn't have the color swatch images. You can search the name of the color on and its hex code, then paste it on the textbox. Separate each color by a comma, with no space between each one. Eg: red: #FF0000,pink: #FFC0CB,black: #000000 

It'll be displayed like this:

- Select an image

Click on the Select Image button to upload your image or pick the existing one from the library. Remember to press the Select button to apply the image successfully.

3. Block settings

Click on the Add block to add content for the product - "Tab - Static Page"

The static tab is created based on Page Content. It's useful for some content that is the same for all the products like Shipping terms, Size Guide, and so on.

- Heading: give it a title 

- Select a Page: click on the Select page button to insert the content 

II. How to Compare section

1. General Settings

- Title: give it a text to set the title for this whole section

- Subtitle

2. Block Settings

Click on the Add Compare row to add more content for the product

- Just enter the Compare title and its Content to each appropriate text box and it'll be displayed like the image below.


- Dot color: click in the color picker to choose your favorite dot color for this Compare row

- Content: enter the content into the text box and it'll be shown below the dot

Do the same steps for the two elements below:


- Dot color

- Content


- Dot color

- Content

III. Relate Product section

1. General settings

- Heading: give a heading for this whole section by filling in the box

- Background color: click on the color picker to choose the background for this section

- Items per row: decide how many items will be displayed in this section by entering the number of items. Eg: 4.3

Use a comma after each value if you want to set a different amount of items for different interfaces. For instance, if you want to set 4.3 items displayed on Desktop but just 3.3 on Tablet, and 1.3 on Mobile. Then, just enter the numbers with commas like: 4.3,3.3,1.3 into the box

Click on the computer icon to view it on the Mobile mode.

- Spacing between items: enter the number in pixel units to set the space 


Mark on the tick-box to enable those features on the section

Loop: The image slide moves and returns to the first slide

- Controls: Show arrows to move slides easier.

- Dot: Show available pages with dots at the section bottom.

- Autoplay: auto-moving the slide

- Change slider every (s): Drag to adjust the speed in second

2. Block Settings - Heading Style

Click on Add Heading Style to modify the section heading

- MarginEnter the numbers in pixels to set the margin for the section. Following the format of the example to set the margin in order Top Right Bottom Left (eg: 50px 20px 0 20px). 

If you also want to set the margin for this section for other interfaces (Tablet, Mobile), just adding a comma "," and continue to type the number for that interface following the order Desktop, Tablet, Mobile (eg: 50px 20px 0 20px20px 30px 0 30px30px 20px 0 30px)

- Padding: enter the values to set the padding with the same format as the margin

- Alignment: 3 options Left/Center/Right

- Color: click on the color picker to adjust 

- Font size: define the font size for the product title heading in pixel units

- Font weight: drag to adjust the font-weight 

- Line height: enter the value for line-heigh in pixel units.

Remember to save all the changes you made by clicking on the Save button at the right top corner of the page.