Quick start: edit Sahil

Goal: add a “Free delivery” line under the product price, safely, on a copy of the live theme.

You need: a Sooquna store, and permission to edit theme code and publish themes (owners have both).

1. Make a copy. In admin, go to Storefront › Themes. On the live theme, open the actions menu and choose Duplicate. You’ll edit the copy, so shoppers see nothing until you publish.

2. Open the code editor. On the copy, choose Edit code. The file tree on the left has the theme’s folders: layout, templates, sections, blocks, snippets, custom_pages, assets, config and locales.

3. Find the price block. Press Ctrl + P (⌘ + P on a Mac) and open blocks/product-price.liquid. This is the theme block that shows the price on product pages.

4. Add a line after the price. Paste this at the end of the block’s markup, before {% schema %}:

   {%- if product.price >= 20000 -%}
     <p class="caption">Free delivery on this item</p>
   {%- endif -%}

   Prices are in minor units, so 20000 is 200.00 in the store currency.

5. Save. Press Ctrl + S. The theme check runs on every save: problems appear under the editor with the file and line.

6. Preview. Choose Preview in the editor’s top bar, pick a product that costs 200 or more as the page to preview, and check the new line. The preview reloads after each save.

7. Translate the text. Hard-coded English won’t do on Arabic pages. Open locales/en.default.json and add a free_delivery key inside the existing "products" object:

   locales/en.default.json

   "products": {
     "free_delivery": "Free delivery on this item",

   Add the same key to locales/ar.json with "توصيل مجاني لهذا المنتج", then use it in the block:

   <p class="caption">{{ 'products.free_delivery' | t }}</p>

8. Publish. Back in Storefront › Themes, choose Publish on the copy. The old live theme stays in your library, so you can switch back.

What you learned

• Theme edits are safest on a copy; the live theme refuses saves with Liquid syntax errors.
• Blocks live in blocks/; the visual editor arranges them, the code editor changes what they draw.
• Storefront text belongs in locales/, read with the t filter.

Next

• Create your first section
• Directory structure